<template>
    <!-- 考试-试卷 -->
    <div class="question-bank-list-wrap">
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item >
                    <!-- 创建时间 -->
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input
                        placeholder="请输入试卷名称"
                        v-model="searchForm.content"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">更多操作</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">新增</el-dropdown-item>
                        <el-dropdown-item command="batchDeletion">批量删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
        <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
            <el-col :span="24">
                <div class="item-wrap">
                <div class="item-content">
                    <p class="item-value color-4">{{ total }}</p>
                    <p class="item-title">试卷总数</p>
                </div>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="examPaperTableList"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="试卷名称" prop="name"></el-table-column>
                <el-table-column label="分数">
                    <el-table-column label="总分" prop="totalScore" width="80"></el-table-column>
                    <el-table-column label="及格线" prop="passLine" width="80"></el-table-column>
                    <el-table-column label="单选分" prop="radioScore" width="80"></el-table-column>
                    <el-table-column label="多选分" prop="checkBoxScore" width="80"></el-table-column>
                    <el-table-column label="判断分" prop="judgeScore" width="80"></el-table-column>
                </el-table-column>
                <el-table-column label="题数">
                    <el-table-column label="总题数" prop="totalNum" width="80"></el-table-column>
                    <el-table-column label="单选数" prop="radioNum" width="80"></el-table-column>
                    <el-table-column label="多选数" prop="checkBoxNum" width="80"></el-table-column>
                    <el-table-column label="判断数" prop="judgeNum" width="80"></el-table-column>
                </el-table-column>
                <el-table-column label="备注" prop="remark" width="250"></el-table-column>
                <el-table-column label="创建人" prop="createAccountName" width="200"></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                        <span v-if="scope.row.status == 0" class="dividing-line">|</span>
                        <el-button v-if="scope.row.status == 0" @click="editQuestionInfo(scope.row)" type="text" size="small">编辑</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="copyExamPaper(scope.row)" type="text" size="small">复制</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="exportExamPaper(scope.row)" type="text" size="small">导出</el-button>
                        <span v-if="scope.row.status != 1" class="dividing-line">|</span>
                        <el-button v-if="scope.row.status != 1" @click="deleteExamPaper(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 新增/编辑题目弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="1200px"
            top='10vh'
            v-if="dialogExamPaper"
            :visible.sync="dialogExamPaper"
            @close="closeExamPaperInfo"
            v-dialogDrag>
            <exam-paper-info :oldInfo="currentExamPaperInfo" :closeFun="closeExamPaperInfo"></exam-paper-info>
        </el-dialog>
        <!-- 试卷详情 -->
        <el-dialog
            :close-on-click-modal="false"
            title="试卷详情"
            width="1000px"
            top='10vh'
            customClass="dialog-exam-paper-view"
            v-if="dialogExamPaperView"
            :visible.sync="dialogExamPaperView"
            @close="closeExamPaperView"
            v-dialogDrag>
            <exam-paper-view :oldInfo="currentExamPaperInfo" :closeFun="closeExamPaperView"></exam-paper-view>
        </el-dialog>
        <!-- 导出试卷 -->
        <el-dialog
            :close-on-click-modal="false"
            title="导出试卷"
            width="600px"
            top='10vh'
            v-if="dialogExportExamPaper"
            :visible.sync="dialogExportExamPaper"
            @close="closeExportExamPaper"
            v-dialogDrag>
            <export-exam-paper :oldInfo="currentExamPaperInfo" :closeFun="closeExportExamPaper"></export-exam-paper>
        </el-dialog>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getExamPaperList, delPapers } from '@/api/exam'
import ExamPaperInfo from './Dialog/ExamPaperInfo'
import ExamPaperView from '../Common/ExamPaperView'
import ExportExamPaper from './Dialog/ExportExamPaper'

export default {
    components: {
        ExamPaperInfo,
        ExamPaperView,
        ExportExamPaper
    },
    data() {
        return {
            utils: utils,
            loading: true,
            searchForm: {
                time: '',
                content: ''
            },
            tableData: [],
            selectedExamPaper: [], // 勾选的试题
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogTitle: '新增试卷',
            currentExamPaperInfo: {}, // 当前操作的试卷信息
            dialogExamPaper: false,
            dialogExamPaperView: false,
            dialogExportExamPaper: false,
            exportType: 1 // 导出试卷类型
        }
    },
    created() {
        this.search()
    },
    methods: {
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            getExamPaperList({
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                content: that.searchForm.content, // 试卷名称
                account: that.$store.state.userinfo.accountName, // 当前登录账号
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        search() {
            this.getTableData(1)
        },
        // 多选
        handleSelectionChange(val) {
            this.selectedExamPaper = val
        },
        // 更多操作
        handleCommand(command) {
            let that = this

            switch (command) {
                case 'add':
                    that.addExamPaper()
                    return false
                case 'batchDeletion':
                    that.batchDeletion()
                    return false
                default:
                    return false
            }
        },
        // 新增试卷
        addExamPaper() {
            this.dialogTitle = '新增试卷'
            this.currentExamPaperInfo = {}
            this.dialogExamPaper = true
        },
        // 批量删除
        batchDeletion() {
            let ids = []
            for(let i=0, len=this.selectedExamPaper.length; i < len; i++) {
                ids.push(this.selectedExamPaper[i].id)
            }
            if(ids.length > 0) {
                // 调用删除
                this.deleteExamPaper(ids.join(','))
            } else {
                this.$message({
                    type: 'warning',
                    message: '请勾选你要删除的试卷!'
                })
                return false
            }
        },
        // 查看详情
        handleDetail(info) {
            this.currentExamPaperInfo = info
            this.dialogExamPaperView = true
        },
        // 编辑
        editQuestionInfo(info) {
            let that = this

            that.dialogTitle = '编辑试卷'
            // 封装题型配置信息
            info.questionConfigStr = JSON.stringify([
                {
                    question_type: 1,
                    question_score: info.judgeEveryScore,
                    question_num: info.judgeNum,
                    sort: 1
                }, {
                    question_type: 2,
                    question_score: info.radioEveryScore,
                    question_num: info.radioNum,
                    sort: 2
                }, {
                    question_type: 3,
                    question_score: info.checkBoxEveryScore,
                    question_num: info.checkBoxNum,
                    sort: 3
                }
            ])

            that.currentExamPaperInfo = info
            that.dialogExamPaper = true
        },
        // 复制
        copyExamPaper(info) {
            let that = this
            let oldInfo = $.extend({}, info)
            that.dialogTitle = '新增试卷'
            oldInfo.name = info.name + '-复制'
            // 封装题型配置信息
            oldInfo.questionConfigStr = JSON.stringify([
                {
                    question_type: 1,
                    question_score: info.judgeEveryScore,
                    question_num: info.judgeNum,
                    sort: 1
                }, {
                    question_type: 2,
                    question_score: info.radioEveryScore,
                    question_num: info.radioNum,
                    sort: 2
                }, {
                    question_type: 3,
                    question_score: info.checkBoxEveryScore,
                    question_num: info.checkBoxNum,
                    sort: 3
                }
            ])
            // 复制时清空createAccount
            oldInfo.createAccount = ''

            that.currentExamPaperInfo = oldInfo
            this.dialogExamPaper = true
        },
        // 导出
        exportExamPaper(info) {
            if(info.id) {
                this.currentExamPaperInfo = info
                this.dialogExportExamPaper = true
            }
        },
        // 删除
        deleteExamPaper(ids) {
            let that = this

            this.$confirm("确定删除？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                delPapers({
                    ids: ids
                }).then(res => {
                    if(res.status === 200) {
                        that.$message.success('删除成功！')
                        // 刷新列表和统计
                        that.search()
                    }
                })
            }).catch(() => {

            })
        },
        // 关闭弹框
        closeExamPaperInfo(refresh) {
            this.dialogExamPaper = false
            if(typeof(refresh) === 'boolean' && refresh) {
                this.getTableData(this.currentExamPaperInfo.id?'':1)
            }
        },
        // 关闭试卷预览
        closeExamPaperView(refresh) {
            this.dialogExamPaperView = false
        },
        // 关闭试卷导出
        closeExportExamPaper() {
            this.dialogExportExamPaper = false
        }
    },
}
</script>
<style lang="scss">
.dialog-exam-paper-view {
    .el-dialog__header {
        border-bottom: 1px solid #DCDFE6;
        text-align: left;
    }
}
</style>
